<!doctype html>


<html>
<head>
  <link rel="shortcut icon" href="static/images/favicon.ico" type="image/x-icon">
  <title>DevCss (Closure Library API Documentation - JavaScript)</title>
  <link rel="stylesheet" href="static/css/base.css">
  <link rel="stylesheet" href="static/css/doc.css">
  <link rel="stylesheet" href="static/css/sidetree.css">
  <link rel="stylesheet" href="static/css/prettify.css">

  <script>
     var _staticFilePath = "static/";
     var _typeTreeName = "goog";
     var _fileTreeName = "Source";
  </script>

  <script src="static/js/doc.js">
  </script>

  <script type="text/javascript" src="//www.google.com/jsapi"></script>
  <script type="text/javascript">
     google.load("visualization", "1", {packages:["orgchart"]});
     var _loadingVisualizations = true;
  </script>

  <meta charset="utf8">
</head>

<body onload="grokdoc.onLoad();">

<div id="header">
  <div class="g-section g-tpl-50-50 g-split">
    <div class="g-unit g-first">
      <a id="logo" href="index.html">Closure Library API Documentation</a>
    </div>

    <div class="g-unit">
      <div class="g-c">
        <strong>Go to class or file:</strong>
        <input type="text" id="ac">
      </div>
    </div>
  </div>
</div>





<div class="colmask rightmenu">
<div class="colleft">
    <div class="col1">
      <!-- Column 1 start -->

<div id="title">
        <span class="fn">debug.DevCss</span>
        <span>Extends</span>
        <span class="fn-name">
          
        </span>
</div>

<div class="g-section g-tpl-75-25">
  <div class="g-unit g-first" id="description">
    A class for solving development CSS issues/emulating the CSS Compiler.

  </div>


        <div class="g-unit" id="useful-links">
          <div class="title">Useful links</div>
          <ol>
            <li><a href="local_closure_goog_debug_devcss_devcss.js.source.html"><span class='source-code-link'>Source Code</span></a></li>
            <li><a href="http://code.google.com/p/closure-library/source/browse/local/closure/goog/debug/devcss/devcss.js">Git</a></li>
          </ol>
        </div>
</div>






<h2 class="g-first">Inheritance</h2>
<div class='gviz-org-chart-container goog-inline-block'>
<table class='gviz-org-chart' style='display:none'>
  <tr><td>goog.debug.DevCss</td><td></td></tr>
</table>
</div>
<div class='gviz-org-chart-container goog-inline-block'>
<table class='gviz-org-chart' style='display:none'>
</table>
</div>




  <h2>Constructor</h2>
      <div class="fn-constructor">
    goog.debug.DevCss(<span><span class="arg">opt_userAgent</span>,&nbsp;<span class="arg">opt_userAgentVersion</span></span>)
  </div>

   <h3>Parameters</h3>






<table class="horiz-rule">
     
   <tr class="even">
     <td>
        <span class="entryName">opt_userAgent</span>
        : <span class="type">goog.debug.DevCss.UserAgent=</span>
        <div class="entryOverview">The user agent, if not
    passed in, will be determined using goog.userAgent.</div>
     </td>
   </tr>
     
   <tr class="odd">
     <td>
        <span class="entryName">opt_userAgentVersion</span>
        : <span class="type"><a href="https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/Number">number</a></span><span>&nbsp;|&nbsp;</span><span class="type">string=</span>
        <div class="entryOverview">The user agent's version.
    If not passed in, will be determined using goog.userAgent.</div>
     </td>
   </tr>
  </table>


<h2>Instance Methods</h2>


  <div class="legend">
        <span class="key publickey"></span><span>Public</span>
        <span class="key protectedkey"></span><span>Protected</span>
        <span class="key privatekey"></span><span>Private</span>
  </div>







<div>
       <div class="desc">
         Defined in
         <span class="fn-name">
            <a href="class_goog_debug_DevCss.html">
              goog.debug.DevCss
            </a>
         </span>
       </div>






<div class="section">
  <table class="horiz-rule">


     <tr class="even entry public">
       <td class="access"></td>






  <td>
    <a name="goog.debug.DevCss.prototype.activateBrowserSpecificCssRules"></a>


     <div class="arg">
       <img align="left" src="static/images/blank.gif">

        <span class="entryName">activateBrowserSpecificCssRules<span class="args">(<span class="arg">opt_enableIe6ReadyHandler</span>)</span>
        </span>
      </div>


     <div class="entryOverview">
       Rewrites the CSSOM as needed to activate any useragent-specific selectors.

     </div>


    <! -- Method details -->
    <div class="entryDetails">

      <div class="detailsSection">
        <b>Arguments: </b>






<table class="horiz-rule">
     
   <tr class="even">
     <td>
        <span class="entryName">opt_enableIe6ReadyHandler</span>
        : <span class="type">boolean=</span>
        <div class="entryOverview">If true(the default), and the
    userAgent is ie6, we set a document "ready" event handler to walk the DOM
    and make combined selector className changes. Having this parameter also
    aids unit testing.</div>
     </td>
   </tr>
  </table>
      </div>
   
  
    </div>
   
  </td>


  <td class="view-code">
     <a href="local_closure_goog_debug_devcss_devcss.js.source.html#line120">code &raquo;</a>
  </td>
     </tr>


     <tr class="odd entry private">
       <td class="access"></td>






  <td>
    <a name="goog.debug.DevCss.prototype.addIe6CombinedClassNames_"></a>


     <div class="arg">
       <img align="left" src="static/images/blank.gif">

        <span class="entryName">addIe6CombinedClassNames_<span class="args">()</span>
        </span>
      </div>


     <div class="entryOverview">
       Adds combined selectors with underscores to make them "work" in IE6.

     </div>

   
  </td>


  <td class="view-code">
     <a href="local_closure_goog_debug_devcss_devcss.js.source.html#line415">code &raquo;</a>
  </td>
     </tr>


     <tr class="even entry private">
       <td class="access"></td>






  <td>
    <a name="goog.debug.DevCss.prototype.generateUserAgentTokens_"></a>


     <div class="arg">
       <img align="left" src="static/images/blank.gif">

        <span class="entryName">generateUserAgentTokens_<span class="args">()</span>
        </span>
      </div>


     <div class="entryOverview">
       Generates user agent token match strings with comparison and version bits.
For example:
  userAgentTokens_.ANY will be like 'GECKO'
  userAgentTokens_.LESS_THAN will be like 'GECKO-LT3' etc...

     </div>

   
  </td>


  <td class="view-code">
     <a href="local_closure_goog_debug_devcss_devcss.js.source.html#line188">code &raquo;</a>
  </td>
     </tr>


     <tr class="odd entry private">
       <td class="access"></td>






  <td>
    <a name="goog.debug.DevCss.prototype.getIe6CombinedSelectorText_"></a>


     <div class="arg">
       <img align="left" src="static/images/blank.gif">

        <span class="entryName">getIe6CombinedSelectorText_<span class="args">(<span class="arg">cssText</span>)</span>
        </span>
        &#8658; <span>?</span><span class="type"><a href="https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/String">string</a></span>
      </div>


     <div class="entryOverview">
       Gets the appropriate new combined selector text for IE6.
Also adds an entry onto ie6CombinedMatches_ with relevant info for the
likely following call to walk the DOM and rewrite the class attribute.
Example: With a selector like
    ".class2 { -goog-ie6-selector: .class1.class2; prop: value }".
this function will return:
    ".class1_class2 { prop: value }".

     </div>


    <! -- Method details -->
    <div class="entryDetails">

      <div class="detailsSection">
        <b>Arguments: </b>






<table class="horiz-rule">
     
   <tr class="even">
     <td>
        <span class="entryName">cssText</span>
        : <span class="type"><a href="https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/String">string</a></span>
        <div class="entryOverview">The CSS selector text and css rule text combined.</div>
     </td>
   </tr>
  </table>
      </div>
   
      <div class="detailsSection">
        <b>Returns:</b>&nbsp;<span>?</span><span class="type"><a href="https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/String">string</a></span>&nbsp;
            The rewritten css rule text.
      </div>
  
    </div>
   
  </td>


  <td class="view-code">
     <a href="local_closure_goog_debug_devcss_devcss.js.source.html#line383">code &raquo;</a>
  </td>
     </tr>


     <tr class="even entry private">
       <td class="access"></td>






  <td>
    <a name="goog.debug.DevCss.prototype.getRuleVersionAndCompare_"></a>


     <div class="arg">
       <img align="left" src="static/images/blank.gif">

        <span class="entryName">getRuleVersionAndCompare_<span class="args">(<span class="arg">cssRule</span>,&nbsp;<span class="arg">token</span>)</span>
        </span>
        &#8658; <span>!</span><span class="type"><a href="https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/Array">Array</a></span><span>&nbsp;|&nbsp;</span><span class="type">undefined</span>
      </div>


     <div class="entryOverview">
       Extracts a rule version from the selector text, and if it finds one, calls
compareVersions against it and the passed in token string to provide the
value needed to determine if we have a match or not.

     </div>


    <! -- Method details -->
    <div class="entryDetails">

      <div class="detailsSection">
        <b>Arguments: </b>






<table class="horiz-rule">
     
   <tr class="even">
     <td>
        <span class="entryName">cssRule</span>
        : <span class="type">CSSRule</span>
        <div class="entryOverview">The rule to test against.</div>
     </td>
   </tr>
     
   <tr class="odd">
     <td>
        <span class="entryName">token</span>
        : <span class="type"><a href="https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/String">string</a></span>
        <div class="entryOverview">The match token to test against the rule.</div>
     </td>
   </tr>
  </table>
      </div>
   
      <div class="detailsSection">
        <b>Returns:</b>&nbsp;<span>!</span><span class="type"><a href="https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/Array">Array</a></span><span>&nbsp;|&nbsp;</span><span class="type">undefined</span>&nbsp;
            A tuple with the result of the compareVersions
    call and the matched ruleVersion.
      </div>
  
    </div>
   
  </td>


  <td class="view-code">
     <a href="local_closure_goog_debug_devcss_devcss.js.source.html#line235">code &raquo;</a>
  </td>
     </tr>


     <tr class="odd entry private">
       <td class="access"></td>






  <td>
    <a name="goog.debug.DevCss.prototype.getVersionNumberFromSelectorText_"></a>


     <div class="arg">
       <img align="left" src="static/images/blank.gif">

        <span class="entryName">getVersionNumberFromSelectorText_<span class="args">(<span class="arg">selectorText</span>,&nbsp;<span class="arg">userAgentToken</span>)</span>
        </span>
        &#8658; <span class="type"><a href="https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/String">string</a></span><span>&nbsp;|&nbsp;</span><span class="type">undefined</span>
      </div>


     <div class="entryOverview">
       Gets the version number bit from a selector matching userAgentToken.

     </div>


    <! -- Method details -->
    <div class="entryDetails">

      <div class="detailsSection">
        <b>Arguments: </b>






<table class="horiz-rule">
     
   <tr class="even">
     <td>
        <span class="entryName">selectorText</span>
        : <span class="type"><a href="https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/String">string</a></span>
        <div class="entryOverview">The selector text of a CSS rule.</div>
     </td>
   </tr>
     
   <tr class="odd">
     <td>
        <span class="entryName">userAgentToken</span>
        : <span class="type"><a href="https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/String">string</a></span>
        <div class="entryOverview">Includes the LTE/GTE bit to see if it matches.</div>
     </td>
   </tr>
  </table>
      </div>
   
      <div class="detailsSection">
        <b>Returns:</b>&nbsp;<span class="type"><a href="https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/String">string</a></span><span>&nbsp;|&nbsp;</span><span class="type">undefined</span>&nbsp;
            The version number.
      </div>
  
    </div>
   
  </td>


  <td class="view-code">
     <a href="local_closure_goog_debug_devcss_devcss.js.source.html#line215">code &raquo;</a>
  </td>
     </tr>


     <tr class="even entry private">
       <td class="access"></td>






  <td>
    <a name="goog.debug.DevCss.prototype.replaceBrowserSpecificClassNames_"></a>


     <div class="arg">
       <img align="left" src="static/images/blank.gif">

        <span class="entryName">replaceBrowserSpecificClassNames_<span class="args">(<span class="arg">cssRule</span>)</span>
        </span>
      </div>


     <div class="entryOverview">
       Replaces a CSS selector if we have matches based on our useragent/version.
Example: With a selector like ".USERAGENT-IE-LTE6 .class { prop: value }" if
we are running IE6 we'll end up with ".class { prop: value }", thereby
"activating" the selector.

     </div>


    <! -- Method details -->
    <div class="entryDetails">

      <div class="detailsSection">
        <b>Arguments: </b>






<table class="horiz-rule">
     
   <tr class="even">
     <td>
        <span class="entryName">cssRule</span>
        : <span class="type">CSSRule</span>
        <div class="entryOverview">The cssRule to potentially replace.</div>
     </td>
   </tr>
  </table>
      </div>
   
  
    </div>
   
  </td>


  <td class="view-code">
     <a href="local_closure_goog_debug_devcss_devcss.js.source.html#line260">code &raquo;</a>
  </td>
     </tr>


     <tr class="odd entry private">
       <td class="access"></td>






  <td>
    <a name="goog.debug.DevCss.prototype.replaceIe6CombinedSelectors_"></a>


     <div class="arg">
       <img align="left" src="static/images/blank.gif">

        <span class="entryName">replaceIe6CombinedSelectors_<span class="args">(<span class="arg">cssRule</span>)</span>
        </span>
      </div>


     <div class="entryOverview">
       Replaces IE6 combined selector rules with a workable development alternative.
IE6 actually parses .class1.class2 {} to simply .class2 {} which is nasty.
To fully support combined selectors in IE6 this function needs to be paired
with a call to replace the relevant DOM elements classNames as well.

     </div>


    <! -- Method details -->
    <div class="entryDetails">

      <div class="detailsSection">
        <b>Arguments: </b>






<table class="horiz-rule">
     
   <tr class="even">
     <td>
        <span class="entryName">cssRule</span>
        : <span class="type">CSSRule</span>
        <div class="entryOverview">The rule to potentially fix.</div>
     </td>
   </tr>
  </table>
      </div>
   
  
    </div>
   
  </td>


  <td class="view-code">
     <a href="local_closure_goog_debug_devcss_devcss.js.source.html#line355">code &raquo;</a>
  </td>
     </tr>


  </table>
</div>
</div>




<h2>Instance Properties</h2>







<div>
       <div class="desc">
         Defined in
         <span class="fn-name">
            <a href="class_goog_debug_DevCss.html">
              goog.debug.DevCss
            </a>
         </span>
       </div>






<div class="section">
  <table class="horiz-rule">


     <tr class="even entry private">
       <td class="access"></td>





  <a name="goog.debug.DevCss.prototype.ie6CombinedMatches_"></a>

  <td>


     <div class="arg">
        <img align="left" src="static/images/blank.gif">

        <span class="entryName">ie6CombinedMatches_</span>
        : 
     </div>


     <div class="entryOverview">
       <span class='nodesc'>No description.</span>
     </div>

  </td>


  <td class="view-code">
     <a href="local_closure_goog_debug_devcss_devcss.js.source.html#line108">Code &raquo;</a>
  </td>
     </tr>


     <tr class="odd entry private">
       <td class="access"></td>





  <a name="goog.debug.DevCss.prototype.isIe6OrLess_"></a>

  <td>


     <div class="arg">
        <img align="left" src="static/images/blank.gif">

        <span class="entryName">isIe6OrLess_</span>
        : 
     </div>


     <div class="entryOverview">
       <span class='nodesc'>No description.</span>
     </div>

  </td>


  <td class="view-code">
     <a href="local_closure_goog_debug_devcss_devcss.js.source.html#line100">Code &raquo;</a>
  </td>
     </tr>


     <tr class="even entry private">
       <td class="access"></td>





  <a name="goog.debug.DevCss.prototype.userAgentTokens_"></a>

  <td>


     <div class="arg">
        <img align="left" src="static/images/blank.gif">

        <span class="entryName">userAgentTokens_</span>
        : 
     </div>


     <div class="entryOverview">
       <span class='nodesc'>No description.</span>
     </div>

  </td>


  <td class="view-code">
     <a href="local_closure_goog_debug_devcss_devcss.js.source.html#line87">Code &raquo;</a>
  </td>
     </tr>


     <tr class="odd entry private">
       <td class="access"></td>





  <a name="goog.debug.DevCss.prototype.userAgentVersion_"></a>

  <td>


     <div class="arg">
        <img align="left" src="static/images/blank.gif">

        <span class="entryName">userAgentVersion_</span>
        : 
     </div>


     <div class="entryOverview">
       <span class='nodesc'>No description.</span>
     </div>

  </td>


  <td class="view-code">
     <a href="local_closure_goog_debug_devcss_devcss.js.source.html#line93">Code &raquo;</a>
  </td>
     </tr>


     <tr class="even entry private">
       <td class="access"></td>





  <a name="goog.debug.DevCss.prototype.userAgent_"></a>

  <td>


     <div class="arg">
        <img align="left" src="static/images/blank.gif">

        <span class="entryName">userAgent_</span>
        : 
     </div>


     <div class="entryOverview">
       One of goog.debug.DevCss.UserAgent.

     </div>

  </td>


  <td class="view-code">
     <a href="local_closure_goog_debug_devcss_devcss.js.source.html#line81">Code &raquo;</a>
  </td>
     </tr>


  </table>
</div>
</div>










<div class="section">
  <table class="horiz-rule">


  </table>
</div>









<div class="section">
  <table class="horiz-rule">


  </table>
</div>



<h2>Enumerations</h2>






<div class="section">
  <table class="horiz-rule">


     <tr class="even entry private">
       <td class="access"></td>





  <a name="goog.debug.DevCss.CssToken_"></a>

  <td>


     <div class="arg">
        <img align="left" src="static/images/blank.gif">

        <span class="entryNamespace">goog.debug.DevCss.</span><span class="entryName">CssToken_</span>
        : 
     </div>


     <div class="entryOverview">
       A list of strings that may be used for matching in CSS files/development.

     </div>

     <div class="entryDetails">
       <div class="detailsSection">
          <b>Constants:</b>
          <table class="horiz-rule">
            <tbody>
              <tr><td>
                <span class="entryName">
                  GREATER_THAN
                </span>
                <div class="entryOverview">
                  <span class='nodesc'>No description.</span>
                </div>
             </td></tr>
              <tr><td>
                <span class="entryName">
                  GREATER_THAN_OR_EQUAL
                </span>
                <div class="entryOverview">
                  <span class='nodesc'>No description.</span>
                </div>
             </td></tr>
              <tr><td>
                <span class="entryName">
                  IE6_COMBINED_GLUE
                </span>
                <div class="entryOverview">
                  <span class='nodesc'>No description.</span>
                </div>
             </td></tr>
              <tr><td>
                <span class="entryName">
                  IE6_SELECTOR_TEXT
                </span>
                <div class="entryOverview">
                  <span class='nodesc'>No description.</span>
                </div>
             </td></tr>
              <tr><td>
                <span class="entryName">
                  LESS_THAN
                </span>
                <div class="entryOverview">
                  <span class='nodesc'>No description.</span>
                </div>
             </td></tr>
              <tr><td>
                <span class="entryName">
                  LESS_THAN_OR_EQUAL
                </span>
                <div class="entryOverview">
                  <span class='nodesc'>No description.</span>
                </div>
             </td></tr>
              <tr><td>
                <span class="entryName">
                  SEPARATOR
                </span>
                <div class="entryOverview">
                  <span class='nodesc'>No description.</span>
                </div>
             </td></tr>
              <tr><td>
                <span class="entryName">
                  USERAGENT
                </span>
                <div class="entryOverview">
                  <span class='nodesc'>No description.</span>
                </div>
             </td></tr>
           </tbody>
         </table>
       </div>
     </div>

  </td>


  <td class="view-code">
     <a href="local_closure_goog_debug_devcss_devcss.js.source.html#line169">Code &raquo;</a>
  </td>
     </tr>


     <tr class="odd entry public">
       <td class="access"></td>





  <a name="goog.debug.DevCss.UserAgent"></a>

  <td>


     <div class="arg">
        <img align="left" src="static/images/blank.gif">

        <span class="entryNamespace">goog.debug.DevCss.</span><span class="entryName">UserAgent</span>
        : 
     </div>


     <div class="entryOverview">
       A list of possible user agent strings.

     </div>

     <div class="entryDetails">
       <div class="detailsSection">
          <b>Constants:</b>
          <table class="horiz-rule">
            <tbody>
              <tr><td>
                <span class="entryName">
                  FIREFOX
                </span>
                <div class="entryOverview">
                  <span class='nodesc'>No description.</span>
                </div>
             </td></tr>
              <tr><td>
                <span class="entryName">
                  GECKO
                </span>
                <div class="entryOverview">
                  <span class='nodesc'>No description.</span>
                </div>
             </td></tr>
              <tr><td>
                <span class="entryName">
                  IE
                </span>
                <div class="entryOverview">
                  <span class='nodesc'>No description.</span>
                </div>
             </td></tr>
              <tr><td>
                <span class="entryName">
                  MOBILE
                </span>
                <div class="entryOverview">
                  <span class='nodesc'>No description.</span>
                </div>
             </td></tr>
              <tr><td>
                <span class="entryName">
                  OPERA
                </span>
                <div class="entryOverview">
                  <span class='nodesc'>No description.</span>
                </div>
             </td></tr>
              <tr><td>
                <span class="entryName">
                  SAFARI
                </span>
                <div class="entryOverview">
                  <span class='nodesc'>No description.</span>
                </div>
             </td></tr>
              <tr><td>
                <span class="entryName">
                  WEBKIT
                </span>
                <div class="entryOverview">
                  <span class='nodesc'>No description.</span>
                </div>
             </td></tr>
           </tbody>
         </table>
       </div>
     </div>

  </td>


  <td class="view-code">
     <a href="local_closure_goog_debug_devcss_devcss.js.source.html#line153">Code &raquo;</a>
  </td>
     </tr>


  </table>
</div>
      <!-- Column 1 end -->
    </div>

        <div class="col2">
          <!-- Column 2 start -->
          <div class="col2-c">
            <h2 id="ref-head">Package debug</h2>
            <div id="localView"></div>
          </div>

          <div class="col2-c">
            <h2 id="ref-head">Package Reference</h2>
            <div id="sideTypeIndex" rootPath="" current="debug.DevCss"></div>
          </div>
          <!-- Column 2 end -->
        </div>
</div>
</div>

</body>
</html>
